<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 通过相对路径引入 -->
    <script src="./js/jquery-3.6.3.min.js"></script>
    <!-- 通过CDN的方式引入网络资源 -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
    <h1>hello world...</h1>
    <div id="index-container" style="height: 100%;"></div>
    
</body>
<script>
    $.ajax({
        // 确定一个URL
        // url: './blog_list.html',
        url: 'https://www.baidu.com',
        // 指定发送的方法
        type: 'get',
        // content-type
        contentType : 'application/x-www-form-urlencoded',
        // 要传参数
        data: 'username=张三&password=123456',
        // 实现回调定义
        // 在发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数。
        beforeSend : function () {
            console.log('发送之间执行的逻辑...');
        },
        // error请求失败时的回调
        error : function () {
            console.log('请求出现异常...');
        },
        // success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串
        success : function (data, state) {
            console.log('请求成功时调用....');
            console.log('state =' + state);
            console.log(data);
            // 把请求回来的内容，加载到当前页的指定标签中
            $('#index-container').html(data);
            $('h1').remove();
        },
        complete : function (xhr, code) {
            console.log('请求完成时调用....');
            console.log(code);
        }


    })
</script>
</html>